// 定义全局自定义指令插件
import { useIntersectionObserver } from '@vueuse/core'

// 1.定义懒加载指令插件
export const imgLazyPlugin = {
    install(app) {
        // 懒加载指令逻辑
        // 注册自定义全局指令，来实现图片进入视口时懒加载效果
        app.directive('img-lazy', {
            // 1. 绑定元素挂在完毕后调用
            mounted(el, binding) {
                // el -> 绑定元素dom节点
                // binging -> 指令对象， binging.value 即指指令绑定的值
                
                // 监听图片是否进入视口区域
                /**
                 * 这里使用vueuse提供的useIntersectionObserver函数来监听元素是否进入视口
                 */
                const { stop } = useIntersectionObserver(
                    el,
                ([{ isIntersecting }]) => {
                    // isIntersecting 是否进入视口区域
                    // 判断是否进入视口， 若进入，则为元素url赋值使其发送请求获取数据
                    if (isIntersecting) {
                        // 给img标签赋值，从而发送请求获取数据
                        el.src = binding.value
                        // 第一次赋值之后停止监听
                        stop()
                    }
                
                },
                )
            }
            
        })
    }
}